<template>
	<div id="main">
		<el-container style="height:100%">
			<!-- 头部-->
			<el-header>
				<el-row style="height:100%">
					<el-col :span="12">
						<div class="block">
							<div style="margin: 10px 0 0 0;">
								<el-avatar src="./static/img/icon5.png">
								</el-avatar>
							</div>
							<div class="sysname">罗小黑CRM</div>
						</div>
					</el-col>
					<el-col :span="12">
						<div class="bloc"  style="float: right;">
							<div style="margin: 15px 0 0 0;width: 30px;height:30px">
								<el-avatar class="img" shape="circle" size="small"  :src="emp.portraitSrc">
								</el-avatar>
							</div>
							<div class="sysname" style="font-size: 14px;top:7px; left: 35px;">
								<el-dropdown @command="userCommand">
									<div class="el-dropdown-link">{{this.$store.state.user.empName}}<i class="el-icon-arrow-down el-icon--right "></i></div>
									<el-dropdown-menu  slot="dropdown">
										<router-link :to="{path:'/personalCenter'}"><el-dropdown-item >个人中心</el-dropdown-item></router-link>
										<el-dropdown-item command="loginOut">退出登录</el-dropdown-item>
									</el-dropdown-menu>
								</el-dropdown>
							</div>
						</div>
					</el-col>
				</el-row>
			</el-header>
			<!-- 侧边导航栏-->
			<el-container  class="changeaside">
				<el-aside width="225px">
					<el-col :span="12" style="width: 100%;">
						<el-menu
								router
								:default-active="this.$route.path"
								class="el-menu-vertical-demo"
								background-color="rgb(30,40,60)"
								text-color="lightgray"
								active-text-color="teal"
								:unique-opened="true"
						>
							<el-menu-item-group>
								<el-menu-item :index=" ft.funTypePath+''" v-for="ft in funMenu" :key="ft.functionTypeId" v-if="ft.funTypePath==null?false:(ft.funTypePath==''?false:true)">
									<i :class="['iconfont',ft.funTypeIcon]"></i>
									<span>{{ft.funTypeName}}</span>
								</el-menu-item>
							</el-menu-item-group>

							<el-submenu :index=" ft.functionTypeId+''" v-for="ft in funMenu" :key="ft.functionTypeId" v-if="ft.funTypePath==null?true:(ft.funTypePath==''?true:false)">
								<template slot="title" v-if="ft.funTypePath==null?true:(ft.funTypePath==''?true:false)">
									<i :class="['iconfont',ft.funTypeIcon]"></i>
									<span>{{ft.funTypeName}}</span>
								</template>
								<el-menu-item-group v-if="ft.funTypePath==null?true:(ft.funTypePath==''?true:false)">
									<el-menu-item v-for="fun in ft.funS" :key="fun.functionId" :index="fun.accessPath">
										<i class="iconfont icon-jiantou1">{{fun.functionName}}</i>
									</el-menu-item>
								</el-menu-item-group>
							</el-submenu>
						</el-menu>
					</el-col>
				</el-aside>
				<el-main>
					<router-view />
				</el-main>
			</el-container>
		</el-container>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				emp:{
					portraitSrc:'',
				},
				isCollapse: true,
				funMenu:[]
			};
		},
		methods: {
			/*
            <el-dropdown-item command="changeImg">更换头像</el-dropdown-item>
                                            <el-dropdown-item command="changePwd">修改密码</el-dropdown-item>
                                            <el-dropdown-item command="loginOut">退出登录</el-dropdown-item>
            */
			userCommand(command){
			 if("loginOut" === command){
					this.$router.push({path:"/login"})
				}
			}
		},
		created(){
			if(localStorage.getItem("user")){
				this.$store.dispatch("setUserStatus",JSON.parse(localStorage.getItem("user")))
			}
			this.$axios.post("api/fun-menu",this.qs.stringify(this.$store.state.user))
					.then(v=>{
						this.funMenu=v.data;
                        window,console.log(this.funMenu)
                        
					});
			this.axios.post("api/select-empById",this.qs.stringify(this.$store.state.user)).then(v=>{
				this.emp=v.data;
			})
            this.$axios.post("api/check-FunTy",this.qs.stringify(this.$store.state.user))
            .then(v=>{
                this.$store.dispatch("setFuntionType",v.data)
            });
		}
	}
</script>

<style>

	.sysname{
		position: absolute;
		top: 3px;
		left: 51px;
		letter-spacing: -1.5px;
		color: #1d2939;
		font-size: 24px;
		font-family: Microsoft YaHei, SimSun;
	}
	#main {
		font-family: "Avenir", Helvetica, Arial, sans-serif;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
		min-height: 1200px!important;
	}
	.iconfont{
		padding-right: 12px!important;
	}


	.el-header{
		color: #333;
		line-height: 50px;
		height:100%;
		border-bottom: 1px solid #d9d9d9;
	}

	.el-submenu .iconfont{
		color:lightgray;
	}
	.el-pager .active{
		background-color: rgb(7,111,189)!important;
	}
	.el-submenu__title i{
		color:lightgray!important;
	}
	.el-aside {
		overflow: unset !important;
		color: #333;
	}
	#main .block{
		float:left;
		position: relative;
		width: inherit;
	}
	#main .bloc{
		float:left;
		position: relative;
		min-width: 100px;
	}
	.el-main {
		background-color: #e9eef3;
		color: #333;
		padding: 0 !important;
	}
	.el-col {
		width: 100%;
		height: 99%
	}
	.el-col-12 {
		width: 100%;
	}
	a {
		text-decoration: none;
	}
	.el-menu-vertical-demo:not(.el-menu--collapse) {
		width: 220px;
		min-height: 400px;
	}
	.el-submenu__title:hover{
		background-color:rgb(19,159,159)!important;
		color: #fff!important;
	}
	.el-menu-item:hover{
		background-color:rgb(19,159,159)!important;
		color: #fff!important;
	}
	.el-submenu/deep/.el-menu-item{
		padding-left: 30px!important;
	}
	.el-header .el-col {
		line-height: 50px;
	}
	.el-aside .el-col{
		background-color:rgb(30,40,60) ;
	}
	.el-menu-vertical-demo:not(.el-menu--collapse) {
		width: auto!important;
		min-height: 1200px!important;
	}
	.el-menu-item-group__title{
		padding: 0!important;
	}
	.contract_title{
		font-size: 25px!important;
		color: #1D2939 ;
		font-family: Microsoft YaHei, SimSun;

	}

	/*所有对话框标题样式*/
	.paddchang /deep/.el-dialog__header{
		background: #f7f7f7;
		padding-bottom: 20px;
		font-size: 18px!important;
		color: #1D2939;
		font-family: Microsoft YaHei, SimSun;
	}
	.el-dialog/deep/.el-dialog__body{/*出事找yl*/
		padding: 0 20px 30px 20px;
	}


	.bloc img{
		height: 100%;
		width: 100%;
		vertical-align:middle;
	}
	.img{
		width: 100%;
		height: 100%;
	}
</style>
